<template>
  <div class="pzWrapper">
    <div class="textPosition">
      <div class="title">节点标签</div>
      <el-radio v-model="radio" label="1">文字置底</el-radio>
      <el-radio v-model="radio" label="2">文字内嵌</el-radio>
    </div>
    <node-table class="nodeTable"></node-table>
    <edge-table></edge-table>
  </div>
</template>

<script>
  import nodeTable from "./nodeTable.vue"
  import edgeTable from "./edgeTable.vue"
  export default {
    name: "pz",
    components: {
      nodeTable,
      edgeTable
    },
    data() {
      return {
        radio: '2'
      }
    },
    created() {},
    methods: {},
    watch: {
      radio(newVal, oldVal) {
        this.$eventBus.$emit("change_labPo", this.radio);
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 单项选择器的样式
  /deep/ .el-radio__input.is-checked+.el-radio__label {
    height: 19px;
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    }

    /deep/ .el-radio {
    color: #333333;

    .el-radio__inner {
        background: #fff;
        border-color: #B7BBC7;

        &::after {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #4B71EB;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        }
    }
    }
  // 多项选择器的样式
  /deep/ .el-checkbox {
    .el-checkbox__label {
        height: 19px;
        font-size: 14px;
        color: #333333;
        line-height: 19px;
    }
    }

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4B71EB;
}

  .pzWrapper {
    .textPosition {
      text-align: left;
      margin-bottom: 50px;

      .title {
        margin-bottom: 10px;
        width: 64px;
        height: 21px;
        font-size: 16px;
        color: #333333;
        line-height: 21px;
      }
    }

    .nodeTable {
      margin-bottom: 50px;
    }
  }
</style>